<template>
  <div class="product-list ">
  <!-- 头部区域 -->
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
  <!-- 卡片区域 -->
  <el-card class="box-card">
    <!-- 查询商品信息区域 -->
   <el-form
   :inline="true"
    :model="formInline"
    ref="numberValidateForm"
    class="demo-form-inline"
    :rules="rules">
    <el-form-item label="商品" prop="user">
      <el-input v-model="formInline.user" placeholder="商品编号/商品名称"></el-input>
    </el-form-item>
    <el-form-item label="商品类别" prop="region">
      <el-select v-model="formInline.region">
        <el-option label="水果" value="shanghai"></el-option>
        <el-option label="肉类" value="beijing"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item prop="regiond">
      <el-select v-model="formInline.regiond">
        <el-option label="水果" value="shanghai"></el-option>
        <el-option label="肉类" value="beijing"></el-option>
      </el-select>
      </el-form-item>
    <el-form-item>
      <el-button type="primary">查询</el-button>
    </el-form-item>
     <el-form-item>
      <el-button type="primary" @click="resetForm">重置</el-button>
    </el-form-item>
   </el-form>
  </el-card>
  <!-- 双边按钮区域 -->
  <div class="buttonAround">
  <el-button type="primary" @click="productClick=true" :disabled="!shopId">新增商品</el-button>
  <el-button type="primary" @click="productderive">导出</el-button>
  </div>
  <!-- 卡片区域2 -->
  <el-card class="box-card2">
    <!-- 表格数据列表 -->
     <template>
    <el-table border :data="rightsList">
      <el-table-column
        prop="goods_id"
        label="商品编号"
        width="68">
      </el-table-column>
      <el-table-column
        prop="goods_image"
        label="商品图"
        width="68">
        <!--插入图片链接的代码-->
    <template slot-scope="scope">
      <img  :src="scope.row.goods_image" alt="" style="width: 50px;height: 50px">
    </template>
      </el-table-column>
       <el-table-column
        prop="goods_name"
        label="商品名称"
        width="68">
      </el-table-column>
      <el-table-column
        prop="goods_type_id"
        label="商品类型"
        width="68">
      </el-table-column>
       <el-table-column
        prop="cost_price"
        label="成本价"
        width="68">
      </el-table-column>
      <el-table-column
        prop="original_price"
        label="原价"
        width="68">
      </el-table-column>
       <el-table-column
        prop="sale_price"
        label="销售价"
        width="68">
      </el-table-column>
      <el-table-column
        prop="stock_amount"
        label="库存量"
        width="68">
      </el-table-column>
       <el-table-column
        prop="Onthepin"
        label="月销量"
        width="68">
        99
      </el-table-column>
      <el-table-column
        prop="j"
        label="总销量"
        width="68">
        99
      </el-table-column>
       <el-table-column
        prop="k"
        label="月销售额"
        width="68">
        2020
      </el-table-column>
      <el-table-column
        prop="l"
        label="总销售额"
        width="68">
        20187
      </el-table-column>
      <el-table-column
        prop="s"
        label="参与活动"
        width="68">
        打折促销
      </el-table-column>
      <el-table-column
        prop="u"
        label="推荐"
        width="68">
        否
      </el-table-column>
      <el-table-column
        prop="o"
        label="热销"
        width="68">
        是
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="68">
        <!-- 作用域插槽开关 -->
        <template #default="{row}">
          <el-tooltip class="item" effect="dark" placement="top"
             :content="row.state==='added'?'上架':'下架'">
              <el-switch
                v-model="row.state"
                size="mini"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="added"
                inactive-value="remove"
                @change="userStateChanged(row)">
              </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        prop="address"
        label="操作">
         <template slot-scope="scope">
               <!-- 删除按钮 -->
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="open(scope.row.goods_id)"
              >删除</el-button>
         </template>
      </el-table-column>
    </el-table>
  </template>
  </el-card>
  <!-- 页面底部 -->
  <!-- 分页功能 -->
<!-- 分页功能 -->
  <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[1, 2, 5, 10]"
      :current-page="this.pageNum"
      :page-size="this.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tatal">
    </el-pagination>
  <!-- 弹出对话窗口 -->
  <el-dialog
    title="新增商品"
    :visible.sync="productClick"
    width="900px"
    @close="editDialogClosed"
    >
    <el-form ref="ruleFormss" :model="form" label-width="130px">
      <div class="huodong">
    <el-form-item label="商品名称">
      <el-input v-model="form.goods_name"></el-input>
    </el-form-item>
    </div>
    <el-form-item label="商品类型">
      <el-select v-model="form.goods_type_id">
        <el-option  v-for="(item,index) in leixin"
                :key="index"
                :label="item.goods_type_name"
                :value="item.goods_type_id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="添加商品图片">
      <el-upload
      :action="uploadURL"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-success="onSuccess"
      list-type="picture"
      :headers="headerObj"
      >
  <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
    </el-form-item>
    <el-form-item label="商品介绍">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
      <el-form-item label="成本价">
        <el-col :span="7">
      <el-input v-model="form.cost_price"></el-input>
        </el-col>
        <el-col class="line" :span="2">(填选)</el-col>
    </el-form-item>
    <el-form-item label="原价">
      <el-col :span="7">
      <el-input v-model="form.original_price"></el-input>
      </el-col>
      <el-col class="line" :span="2">(填选)</el-col>
    </el-form-item>
    <el-form-item label="销售价">
      <el-col :span="7">
      <el-input v-model="form.sale_price"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="存库">
      <el-col :span="7">
      <el-input v-model="form.stock_amount"></el-input>
      </el-col>
      <el-col class="line" :span="8">(修改后的库存数量即当前库存)</el-col>
    </el-form-item>
    <el-form-item label="商品活动">
      <el-radio-group>
        <div class="label-box"><el-radio label="不参与活动"></el-radio></div>
        <el-radio label="定时秒杀"></el-radio>
      </el-radio-group>
    </el-form-item>
      <el-form-item label="账号限购">
        <el-col :span="7">
        <el-input v-model="form.Onthepin"></el-input>
        </el-col>
        <el-col class="line" :span="1">件</el-col>
      </el-form-item>
      <el-form-item label="秒杀价">
        <el-col :span="7">
        <el-input v-model="form.s"></el-input>
        </el-col>
        <el-col class="line" :span="1">元</el-col>
      </el-form-item>
      <el-form-item label="秒杀时间段">
      <el-col :span="7">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">至</el-col>
      <el-col :span="5">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
      </el-col>
    </el-form-item>
      <el-form-item label="促销价">
         <el-col :span="7">
        <el-input v-model="form.d"></el-input>
         </el-col>
      </el-form-item>
      <el-form-item >
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="第一件优惠(关闭此项时，从第二件起才享受促销价)" name="type"></el-checkbox>
      </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否临保">
      <el-radio-group>
        <el-radio label="否"></el-radio>
        <el-radio label="是(临保商品无法设置推荐或热销)"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="临保时长">
        <el-col :span="7">
        <el-input v-model="form.e"></el-input>
        </el-col>
        <el-col class="line" :span="1">天</el-col>
      </el-form-item>
      <el-form-item label="是否推荐">
      <el-radio-group v-model="form.resource">
        <el-radio label="否"></el-radio>
        <el-radio label="是"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否热销">
      <el-radio-group v-model="form.resource">
        <el-radio label="否"></el-radio>
        <el-radio label="是"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否可以用优惠卷">
      <el-radio-group v-model="form.resource">
        <el-radio label="否"></el-radio>
        <el-radio label="是"></el-radio>
      </el-radio-group>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button class="save" type="primary" @click="productClicklist">保存</el-button>
      <el-button  @click="productClick = false">返回商品列表</el-button>
    </span>
</el-dialog>
  </div>
</template>

<script>
import { product, productt, newly, deleteid, goodsListamend, goodsModifythee } from '@/api/user'
export default {
  name: 'CommodityIndex',
  props: {
  },
  components: {
    // NewlyIncreased
  },
  data () {
    return {
      shopId: 0,
      fileList: [],
      uploadFile: null,
      formInline: {
        user: '',
        region: '',
        regiond: ''
      },
      // 对话框开启
      productClick: false,
      rightsList: [],
      // 上传图片的URL地址
      uploadURL: 'http://192.168.14.75:9090/api/goods',
      // 这是上传组件headers请求对象
      headerObj: {
        Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXN1bHQiOnsidXNlcl9pZCI6MzIsInVzZXJfbmFtZSI6ImFkbWluIiwicGFzc3dvcmQiOiIiLCJuYW1lIjoiMTExIiwicGhvbmUiOiIxODgxMTExMTExMSIsInBvc2l0aW9uIjoi54Gr5pifIiwic3RhdGUiOiJ2YWxpZCJ9LCJpYXQiOjE2MDI1NzI2ODUsImV4cCI6MTYwMjY1OTA4NX0.kZLCPdSwXxC13lTznuaH6tUYUWMQdzWbSXOXtGQ0ozg'
      },
      tatal: 0,
      pageNum: 1, // 当前页面
      pageSize: 5, // 每页条数
      productClickd: false,
      form: {
        goods_name: '', // 商品名称
        goods_type_id: '', // 商品类型id
        cost_price: '', // 成本价格
        original_price: '', // 原价
        sale_price: '', // 销售价格
        stock_amount: '', // 存量
        Onthepin: 1, // 账号限购
        s: 1,
        d: 1,
        e: 10,
        // 总销售额
        // 月销售额
        type: []
      },
      leixin: {},
      numberValidateForm: '',
      // 表单重置验证
      rules: {
        user: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        regiond: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    '$route' (to, from) {
      console.log(to, from)
      if (to.fullPath === '/product-list') {
        this.shopId = ''
        this.getProductList()
      }
    }

  },
  computed: {},
  created () {
    this.zz()
    this.shopId = this.$route.query.id
    // console.log(this.$route.query.id)
    this.getProductList()
    this.getGoodsid()
  },
  mounted () {

  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    async getProductList () {
      try {
        const { data } = await product({
          params: {
            shop_id: this.shopId,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        })
        this.rightsList = data.data.rows
        this.tatal = data.data.count
        console.log(data)
      } catch (err) {
        this.$message.error('获取商品信息失败')
      }
    },
    async zz () {
      const { data } = await goodsModifythee()
      console.log(data)
      this.leixin = data.data.goodsTypeList
      console.log(this.leixin)
    },
    async getGoodsid () {
      const { data } = await productt(this.shopId)
      this.getProductList()
      console.log(data)
    },
    // 监听handleSizeChange改变事件
    handleSizeChange (newSize) {
      // console.log(newSize)
      this.pageSize = newSize
      this.getProductList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      // console.log(newPage)
      this.pageNum = newPage
      this.getProductList()
    },
    // 导出按钮
    productderive () {
      this.$message.success('导出成功')
    },
    // 监听开关下架状态
    async userStateChanged (userinfo) {
      // console.log(userinfo)
      try {
        const { data } = await goodsListamend(userinfo.goods_id, { state: userinfo.state === 'added' ? 'added' : 'remove' })
        console.log(data)
        this.$message.success('更新成功!')
        // this.getProductList()
      // console.log(res)
      } catch (err) {
        userinfo.state = !userinfo.state
        this.$message.error('更新失败!')
      }
    },
    // 重置按钮
    resetForm () {
      console.log(123)
      this.$refs.numberValidateForm.resetFields()
    },
    onSuccess (res, file) {
      this.uploadFile = file.raw
      // console.log(file.raw)
    },
    editDialogClosed () {
      this.$refs.ruleFormss.resetFields()
    },
    // 商品新增
    async productClicklist () {
      try {
        const formData = new FormData()
        formData.append(
          'goods_image', this.uploadFile, this.form
        )
        console.log(Object.keys(this.form))

        Object.keys(this.form).forEach(key => {
          formData.append(key, this.form[key])
        })
        formData.append('shop_id', this.shopId)
        const { data } = await newly(formData)
        console.log(data)
        console.log(this.form)
        this.$message.success('添加商品成功')
        this.productClick = false
        this.getGoodsid()
        this.getProductList()
      } catch (err) {
        this.$message.error('添加商品失败')
      }
    },
    // 处理移除图片操作
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 处理图片预览效果
    handlePreview (file) {
      console.log(file)
    },
    // 删除功能
    async open (id) {
      const confitmResult = await this.$confirm('此操作将永久删除该文件', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confitmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data } = await deleteid(id)
      this.$message.success('删除商品成功')
      this.getProductList()
      console.log(data)
      console.log(id)
    }
  }
}
</script>

<style scoped lang="less">
.merchandise{
  font-size: 14px;
}
.el-select{
  margin-right: 20px;
}
.box-card {
    height: 80px;
}
.el-form-item{
.el-button{
  width: 80px;
  margin-right: 20px;
    }
}
.buttonAround{
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-flow:  row nowrap;
  justify-content: space-between;
}
.el-pagination {
  text-align: center;
}
/deep/.el-table .cell{
  width: 150px;
}
/deep/.el-table th>.cell{
  width: 150px;
}
.product-backgauge{
  margin-left: 5px;
}
.label-box{
  padding-top: 13px;
  margin-bottom: 10px;
}
/deep/.el-textarea__inner{
width: 50%;
}
.huodong{
  /deep/.el-input__inner{
    width: 300px;
  }
}
/deep/.el-dialog__footer{
  text-align: left;
}
.save{
  margin-right: 40px;
}
/deep/.el-form-item{
margin-bottom: 6px;
}
// /deep/.el-card__body{
//   min-width: 1300px;
// }
</style>
